<template>
    <div id="app">
        <div class="header">
            <div class="content-wrap">
                <div class="avatar">
                    <img :src="seller.avatar" width="64" height="64">
                </div>
                <div class="content">
                    <div class="title">
                        <span class="brand"></span>
                        <span class="name">{{seller.name}}</span>
                    </div>
                    <div class="desc">{{seller.description}}/{{seller.deliveryTime}}送达</div>
                    <div class="cheap" v-if="seller.supports">
                        <div class="minus"></div>
                        <div class="cheap-minus">
                            {{seller.supports[0].description}}
                        </div>
                    </div>
                    <div class="more" v-if="seller.supports" @click="showDetail">
                        <div class="text">{{seller.supports.length}}个</div>
                        <div class="icon">></div>
                    </div>
                </div>
                <div class="bulletin" @click="showDetail">
                    <div class="icon"></div>
                    <div class="bulletin-text">{{seller.bulletin}}</div>
                    <div class="arrow">></div>
                </div>
                <div class="background"></div>
            </div>
            <div class="detail" v-show="details">
                <div class="detail-wrap">
                  <div class="main">
                      <div class="name">{{seller.name}}
                          <div class="star">
                            <div class="star1">★★★★★</div>
                            <div class="star2" :style="{width:sellerscore}">★★★★★</div>
                          </div>
                          <div class="info">优惠信息</div>
                      </div>
                       <ul class="sale-wrap" v-if="seller.supports">
                         <li class="sale" v-for="(item,i) in seller.supports" :key="item.type">
                           <span class="icon" :class="classMap[seller.supports[i].type]"></span><div class="text">{{item.description}}</div>
                        </li>
                       </ul>
                       <div class="saler">商家公告</div>
                       <div class="seller-text">{{seller.bulletin}}</div>
                 </div>
                </div>
                <div class="close" @click="closeDetail">×</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: ['seller'],
  data() {
    return {
      details: false
    }
  },
  methods: {
    showDetail() {
      this.details = true
    },
    closeDetail() {
      this.details = false
    }
  },
  created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  computed: {
    sellerscore () {
      let score = this.seller.score * 20 + '%'
      return score
    }
  }
}
</script>

<style lang='scss' scoped>
// @import '../../common/scss/base.scss';
@mixin bg-image($url) {
  background-image: url($url+"@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url+"@3x.png");
  }
}
.content-wrap {
  display: flex;
  background-color: rgba(7, 17, 27, 0.5);
  padding: 24px 12px 36px 24px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  .avatar {
    img {
      display: block;
      border-radius: 2px;
    }
  }
  .content {
    color: #fff;
    margin-left: 16px;
    .title {
      // position: relative;
      .brand {
        display: inline-block;
        background-image: url("brand@2x.png");
        background-position: center;
        background-size: 100% 100%;
        width: 30px;
        height: 18px;
        position: relative;
        top: 2px;
      }
      .name {
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
      }
    }
    .desc {
      font-size: 12px;
      font-weight: 200;
      line-height: 12px;
      margin: 8px 0 10px 0;
    }
    .cheap {
      display: flex;
      .minus {
        width: 12px;
        height: 12px;
        background: url("decrease_1@2x.png") no-repeat center / 100% 100%;
        margin: 0 4px 0 2px;
      }
      .cheap-minus {
        font-size: 10px;
        font-weight: 200;
        line-height: 12px;
      }
    }
    .more {
      display: flex;
      position: absolute;
      right: 12px;
      bottom: 43px;
      font-size: 10px;
      line-height: 12px;
      border-radius: 24px;
      padding: 7px 8px 7px 8px;
      background: rgba(0, 0, 0, 0.2);
      .text {
        margin-right: 4px;
      }
    }
  }
}
.bulletin {
  margin-top: 18px;
  width: 100%;
  background-color: rgba(7, 17, 27, 0.2);
  display: flex;
  align-items: center;
  height: 28px;
  position: absolute;
  left: 0;
  bottom: 0;
  .icon {
    position: absolute;
    left: 12px;
    width: 22px;
    height: 12px;
    background: url("./bulletin@2x.png") no-repeat center / 100% 100%;
  }
  .bulletin-text {
    width: 85%;
    position: absolute;
    left: 38px;
    color: #fff;
    font-size: 10px;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .arrow {
    color: #fff;
    position: absolute;
    right: 8px;
    font-size: 10px;
  }
}
.background {
  width: 100%;
  height: 100%;
  background: url("http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg")
    no-repeat center / 100% 300%;
  filter: blur(10px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.detail {
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 17, 27, 0.8);
  overflow: auto;
  //   filter: blur(10px);
  .detail-wrap {
    min-height: 40%;
    .main {
      color: #fff;
      margin-top: 64px;
      padding-bottom: 64px;
      padding-left: 36px;
      padding-right: 36px;
      .name {
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 64px;
        .star {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          height: 48px;
          top: 32px;
          width: 102px;
          .star1 {
            position: absolute;
            height: 48px;
            font-size: 25px;
            color: rgba(255, 255, 255, 0.5);
          }
          .star2 {
            position: absolute;
            width: 80%;
            height: 48px;
            color: orange;
            font-size: 25px;
            overflow: hidden;
          }
        }
        .info {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 84px;
        }
        .info::before,
        .info::after {
          content: "";
          display: block;
          position: absolute;
          width: 112px;
          height: 1px;
          background-color: rgba(255, 255, 255, 0.2);
          top: 9px;
        }
        .info::before {
          left: 76px;
        }
        .info::after {
          right: 84px;
        }
      }
      .sale-wrap {
        width: 80%;
        margin: 0 auto;
        position: absolute;
        top: 190px;
        .sale {
          padding: 0 12px;
          margin-bottom: 12px;
          font-size: 0;
          display: flex;
          &:last-child {
            margin-bottom: 0;
          }
          .icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: top;
            margin-right: 6px;
            background-size: 16px 16px;
            background-repeat: no-repeat;
            &.decrease {
              @include bg-image("decrease_2");
            }
            &.discount {
              @include bg-image("discount_2");
            }
            &.guarantee {
              @include bg-image("guarantee_2");
            }
            &.invoice {
              @include bg-image("invoice_2");
            }
            &.special {
              @include bg-image("special_2");
            }
          }
          .text {
            font-size: 12px;
            line-height: 16px;
          }
        }
      }
      .saler {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 350px;
        }
        .saler::before,
        .saler::after {
          content: "";
          display: block;
          position: absolute;
          width: 112px;
          height: 1px;
          background-color: rgba(255, 255, 255, 0.2);
          top: 9px;
        }
        .saler::before {
          left: 76px;
        }
        .saler::after {
          right: 84px;
        }
        .seller-text {
          font-size: 12px;
          font-weight: 200;
          line-height: 24px;
          margin-top: 395px;
        }
    }
  }
}
.close {
  position: relative;
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.5);
  margin: -64px auto 0 auto;
}
</style>
